<template>
	<view class="d-kuan">
		<!--view class="d-waigao-20 d-beijing-baise d-yuanjiao-10 d-bianhua-10" >
			<uv-row customStyle="" gutter="20">
				<uv-col span="4">
					<view class="d-shang-10 d-wenzi-12 d-juzhong d-xia-10">
						0元免费商用
					</view>
					<uv-button @click="xiangqing" text="开发版" size="small" shape="circle" color="linear-gradient(to right, rgb(64, 216, 194), rgb(56, 171, 213))"></uv-button>
					<view class="d-shang-10 d-wenzi-12 d-jiacu d-juzhong" style="color: #2b907a;">
						24%选择它
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong">
						更新时间
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong">
						两个月更新一次
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong">
						赞助费
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong d-jiacu">
						0元
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong d-jiacu">
						<uv-button @click="xiangqing" type="info" size="small" :plain="true" :hairline="true" shape="circle" text="详情"></uv-button>
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong d-jiacu">
						<uv-button @click="xiazai(1)" type="info" size="small" :plain="true" :hairline="true" shape="circle" text="下载"></uv-button>
					</view>

				</uv-col>
				<uv-col span="4">
					<view class="d-shang-10 d-wenzi-12 d-juzhong d-xia-10">
						赞助商用
					</view>
					<uv-button @click="xiangqing" text="赞助版" size="small" shape="circle" color="linear-gradient(to right, rgb(64, 216, 194), rgb(56, 171, 213))"></uv-button>
					<view class="d-shang-10 d-wenzi-12 d-jiacu d-juzhong" style="color: #2b907a;">
						65%选择它
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong">
						更新时间
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong">
						2至3天更新一次
					</view>
					<view @click="zanzhu" class="d-shang-10 d-wenzi-12 d-jiacu d-juzhong" style="color: #ff4534;">
						【我要赞助】
					</view>
					<view class="d-shang-10 d-wenzi-12 d-jiacu d-juzhong">
						298元
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong d-jiacu">
						<uv-button @click="xiangqing" type="info" size="small" :plain="true" :hairline="true" shape="circle" text="详情"></uv-button>
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong d-jiacu">
						<uv-button @click="xiazai(3)" type="info" size="small" :plain="true" :hairline="true" shape="circle" text="下载"></uv-button>
					</view>

				</uv-col>
				<uv-col span="4">
					<view class="d-shang-10 d-wenzi-12 d-juzhong d-xia-10">
						定制商用
					</view>
					<uv-button text="定制版" size="small" shape="circle" color="linear-gradient(to right, rgb(236, 169, 0), rgb(232, 41, 27))"></uv-button>
					<view class="d-shang-10 d-wenzi-12 d-jiacu d-juzhong" style="color: #2b907a;">
						11%选择它
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong">
						定制时间
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong">
						2至3天完成
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong">
						定制费
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong d-jiacu">
						200元/起
					</view>
					<view class="d-shang-10 d-wenzi-12 d-juzhong d-jiacu">
						
						<uv-button type="info" size="small" :plain="true" :hairline="true" shape="circle" text="微信：duixincc"></uv-button>
					</view>
					
					<view class="d-shang-10 d-wenzi-12 d-juzhong d-jiacu">
						<uv-button @click="xuqiu" type="info" size="small" :plain="true" :hairline="true" shape="circle" text="发布需求"></uv-button>
					</view>
					
				</uv-col>
			</uv-row>
			
			
		</view-->
		<view class="d-kuan">
			<view class="evaluation-buttons d-waigao-20">
				<!-- 第一个按钮：盈利模式 -->
				<view class="evaluation-button" @click="goEvaluation(2)">
					<text class="button-title">1盈利模式</text>
					<text class="button-subtitle">能赚钱的模式</text>
				</view>
				
				<!-- 第二个按钮：功能 -->
				<view class="evaluation-button" @click="goEvaluation(1)">
					<text class="button-title">2功能</text>
					<text class="button-subtitle">多样化的功能辅助</text>
				</view>
				
				<!-- 第三个按钮：做什么站赚钱 -->
				<view class="evaluation-button" @click="goEvaluation(3)">
					<text class="button-title">3做什么站赚钱</text>
					<text class="button-subtitle">了解市场的需求</text>
				</view>
			</view>
		</view>
		<view class="d-clear"></view>

		<view class="d-waigao-20 d-beijing-baise d-yuanjiao-10 d-bianhua-10" >
			<view class="d-kuan d-shang-10">
				<view class="d-shangxia-10">
					<uv-cell-group :border="false">
						<uv-cell :border="false">
							<!-- 自定义左侧标题下面的内容 -->
							<template v-slot:title>
								<view class="d-buhuanhang d-juzhong" @click="go_quantie(xinban_data.id, xinban_data.cid)">
									<uv-tags style="width: 40px;" text="新 版" size="mini" type="error" shape="circle"></uv-tags> <text class="d-chaochu-1" style="line-height: 22px;margin-left: 10px;color: #e3431a;font-size: 40rpx;">{{ xinban_data.title || '无' }}</text>
								</view>
							</template>
						</uv-cell>
					</uv-cell-group>

				</view>
				<uv-steps current="0">
					
					<uv-steps-item >
						<template v-slot:title>
							<text>安装后端</text>
							
							<uv-button class="d-shang-5" @click="xiazai(1)" shape="circle" size="small" text="下载" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></uv-button>
							<view @click="xiazai(1)" class="d-wenzi-16 d-shang-10" style="color: #919191;">{{tongji.houduan || 0}}次</view>
							<view @click="jiaoceng1()" class="d-wenzi-16 d-shang-10" style="color: #919191;">安装教程</view>
							
						</template>
						
						
						
					</uv-steps-item>
					<uv-steps-item >
						<template v-slot:title>
							<text>安装前端</text>
							<uv-button class="d-shang-5" @click="xiazai(2)" shape="circle" size="small" text="下载" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></uv-button>
							<view @click="xiazai(2)" class="d-wenzi-15 d-shang-10" style="color: #919191;">{{tongji.qianduan || 0}}次</view>
							<view @click="jiaoceng2()" class="d-wenzi-15 d-shang-10" style="color: #919191;">安装教程</view>
						</template>
						
						
						
					</uv-steps-item>
					<uv-steps-item>
						<template v-slot:title>
							<text>购买/赞助</text>
							
							<uv-button class="d-shang-5" @click="xie" shape="circle" size="small" text="购买" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></uv-button>
							
							<view @click="zanzhu" class="d-wenzi-15 d-shang-10" style="color: #919191;">详情</view>
						</template>
						
					</uv-steps-item>
					<uv-steps-item>
						<template v-slot:title>
							<text>遇到问题</text>
							
							<uv-button class="d-shang-5" @click="jiaoliu" shape="circle" size="small" text="提问" color="linear-gradient(to right, rgb(239, 89, 19), rgb(255, 35, 35))"></uv-button>
							<view @click="xuexi" class="d-wenzi-12 d-shang-10" style="color: #919191;">
								学习运营
							</view>
						</template>
						
					</uv-steps-item>
				</uv-steps>
			</view>
		</view>
		<view class="d-clear"></view>
		
		<view class="d-waigao-20" >
			<view class="evaluation-buttons">
				<view class="d-goumai" >
					<text class="button-title">开发版</text>
					<uv-button class="d-shang-5" @click="duibi()" shape="circle" size="small" text="支持功能对比" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></uv-button>
					<uv-button class="d-shang-5" @click="xiazai(2)" shape="circle" size="small" text="下载" color="linear-gradient(to right, rgb(213, 214, 216), rgb(208, 213, 211))"></uv-button>

					<text class="button-subtitle d-shang-10 d-jiacu" style="color: #e3431a;">0元</text>
					<text class="button-subtitle d-shang-10">可商用</text>
					<text class="button-subtitle d-shang-10">永久使用权</text>
					<text class="button-subtitle d-shang-10">100% 开源</text>
					<text class="button-subtitle d-shang-10">自由部署</text>
					<text class="button-subtitle d-shang-10">数据自由管控</text>
					<text class="button-subtitle d-shang-10">可二次开发</text>
					<text class="button-subtitle d-shang-10" style="color: #e3431a;">不支持插件</text>
					<text class="button-subtitle d-shang-10" style="color: #e3431a;">不支持组件</text>
					<text class="button-subtitle d-shang-10" style="color: #e3431a;">自己更新</text>
					

				</view>
                <view  class="d-goumai"> 
					<text class="button-title">赞助版</text>
					<uv-button class="d-shang-5" @click="duibi()" shape="circle" size="small" text="支持功能对比" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></uv-button>
					<uv-button class="d-shang-5" @click="xiazai(2)" shape="circle" size="small" text="下载" color="linear-gradient(to right, rgb(213, 214, 216), rgb(208, 213, 211))"></uv-button>
					<text class="button-subtitle d-shang-10" style="color: #e3431a;">0元</text>
					<text class="button-subtitle d-shang-10">可商用</text>
					<text class="button-subtitle d-shang-10">永久使用权</text>
					<text class="button-subtitle d-shang-10">100% 开源</text>
					<text class="button-subtitle d-shang-10">自由部署</text>
					<text class="button-subtitle d-shang-10">数据自由管控</text>
					<text class="button-subtitle d-shang-10">可二次开发</text>
					<text class="button-subtitle d-shang-10" style="color: #e3431a;">支持插件</text>
					<text class="button-subtitle d-shang-10" style="color: #e3431a;">支持组件</text>
					<text class="button-subtitle d-shang-10" style="color: #e3431a;">官方更新</text>
					
				</view>
				<!--view  class="d-goumai"> 
					<text class="button-title">金牌赞助VIP</text>
					<uv-button class="d-shang-5" @click="xie" shape="circle" size="small" text="更新续费" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></uv-button>
					<text class="button-subtitle d-shang-10" style="color: #e3431a;">298元</text>
					<text class="button-subtitle d-shang-10">插件优惠20%</text>
					<text class="button-subtitle d-shang-10">赠送赞助金100</text>
					<text class="button-subtitle d-shang-10">续费更新</text>
					<text class="button-subtitle d-shang-10" style="height: 220rpx;"></text>
                </view-->

			</view>

		</view>
		<view class="d-clear"></view>
		<view class="d-waigao-20" >
			<view class="evaluation-buttons">
				<view class="d-goumai-vip" >
						<text class="button-title">白金赞助<view class="vip-float-tag">VIP</view></text>
					<uv-button class="d-shang-5" @click="xie" shape="circle" size="small" text="购买" color="linear-gradient(to right, rgb(27, 29, 15), rgb(37, 60, 112))"></uv-button>
		
					<text class="button-subtitle d-shang-10 d-jiacu" style="color: #e3431a;">9.9元</text>
					<text class="button-subtitle d-shang-10">插件优惠20%</text>
					<text class="button-subtitle d-shang-10" style="color: #e3431a;">组件全免</text>
					<text class="button-subtitle d-shang-10">赠送赞助金50</text>
					<text class="button-subtitle d-shang-10">可购5个插件</text>

		
				</view>
		        <view  class="d-goumai-vip"> 
					<text class="button-title">钻石赞助<view class="vip-float-tag">VIP</view></text>
					<uv-button class="d-shang-5" @click="xie" shape="circle" size="small" text="购买" color="linear-gradient(to right, rgb(27, 29, 15), rgb(37, 60, 112))"></uv-button>
					<text class="button-subtitle d-shang-10 d-jiacu" style="color: #e3431a;">298元</text>
					<text class="button-subtitle d-shang-10">插件优惠50%</text>
					<text class="button-subtitle d-shang-10" style="color: #e3431a;">组件全免</text>
					<text class="button-subtitle d-shang-10">赠送赞助金500</text>
					<text class="button-subtitle d-shang-10">可购100个插件</text>
				</view>
				<view  class="d-goumai-vip"> 
					<text class="button-title">金牌赞助<view class="vip-float-tag">VIP</view></text>
					<uv-button class="d-shang-5" @click="xie" shape="circle" size="small" text="购买" color="linear-gradient(to right, rgb(27, 29, 15), rgb(37, 60, 112))"></uv-button>
					<text class="button-subtitle d-shang-10 d-jiacu" style="color: #e3431a;">999元</text>
					<text class="button-subtitle d-shang-10">插件优惠60%</text>
					<text class="button-subtitle d-shang-10" style="color: #e3431a;">组件全免</text>
					<text class="button-subtitle d-shang-10">赠送赞助金1999</text>
					<text class="button-subtitle d-shang-10">可购490个插件</text>
		        </view>
		
			</view>
		
		</view>
		<view class="d-clear"></view>
		<view v-if="list_tui_data.length > 0" v-for="(list,index) in list_tui_data" :key="index" class="d-waigao-20 d-beijing-baise d-yuanjiao-10 d-bianhua-10" >
			<view class="d-kuan">
				<view class="d-shangxia-10">
					<uv-cell-group :border="false">
						<uv-cell :border="false">
							<!-- 自定义左侧标题下面的内容 -->
							<template v-slot:title>
								<view class="d-buhuanhang d-juzhong" @click="go_quan(list.quan_id)">
									<image :src="list.quan_tubiao" mode="aspectFill" class="d-img-40 d-yuanjiao-50 d-img-anhei"></image> <text class="d-chaochu-1" style="line-height: 50px;margin-left: 10px;color: #262626;font-size: 50rpx;">{{ list.quan_ming || '无' }}</text>
								</view>
							</template>
						</uv-cell>
					</uv-cell-group>
				
				</view>
				<view class="d-kuan" @click="go_quan(list.quan_id)">
					<view class="d-shangxia-10 d-juzhong">
						<text class="d-chaochu-1" style="margin-left: 10px;color: #262626;font-size: 40rpx;">2025年 ~ 2065年</text>
					</view>
					<view class="d-shangxia-10 d-juzhong">
					<uv-count-down :customStyle="{ fontSize: '80rpx' }" style="font-size: 24px;" :time="countdownTime" format="共14610天 还剩余 DD 天 HH:mm:ss"></uv-count-down>
				    </view>
					<view class="d-kuan d-wenzi-12 d-juzhong">
						<view class="d-neikuang-10">
						{{list.quan_jianjie}}
						</view>
					</view>
				</view>
					
				<!--推荐-->
				<view class="d-beijing-baise d-yuanjiao-10 ">
					<uv-cell-group :border="false">
						<uv-cell v-for="(list2,index2) in list.tie" :key="index2" @click="tiezi(list2.quan_id,list2.tie_id)">
							<!-- 自定义左侧标题下面的内容 -->
							<template v-slot:title>
								<view class="d-buhuanhang" >
									<uv-tags style="width: 40px;" text="分享" size="mini" type="error" shape="circle"></uv-tags> <text class="d-chaochu-1" style="line-height: 22px;margin-left: 10px;">{{list2.tie_title}}</text>
								</view>
							</template>
							<!-- 自定义右侧图标 -->
							<template v-slot:right-icon>
								<uv-icon size="30rpx" name="arrow-right"></uv-icon>
							</template>
						</uv-cell>
						
					</uv-cell-group>
				
				</view>
				<view class="d-kuan d-wenzi-12 d-shang-10">
                	<view class="d-neikuang-10">
                	{{list.quan_neirong}}
                	</view>
                </view>
				<view class="d-shangxia-10">
					<uv-cell-group :border="false">
						<uv-cell :border="false">
							<!-- 自定义左侧标题下面的内容 -->
							<template v-slot:title>
								<view class="d-buhuanhang d-juzhong" @click="go_quan('20')">
									<image :src="list.quan_tubiao" mode="aspectFill" class="d-img-40 d-yuanjiao-50 d-img-anhei"></image> <text class="d-chaochu-1" style="margin-left: 10px;color: #262626;font-size: 50rpx;">你的未来四十年如何计划？</text>
								</view>
							</template>
						</uv-cell>
					</uv-cell-group>
					<view class="d-kuan d-juzhong">
						<uv-button text="分享你的四十年"  @click="go_quan('20')" shape="circle" size="small" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></uv-button>
					</view>
				
				</view>
				
		    </view>
		</view>
		<view class="d-clear"></view>
	</view>
</template>
<script>
import Api from '@/utils/api.js';
import QuanApi from '@/utils/quan_api.js';
//var wxRequest_2 = require("../../utils/wxRequest.js");
import { getRequest,postRequest } from '@/utils/wxRequest.js';

export default {
  data() {
    return {
      // 定义统计数据对象，用于页面显示
      tongji: {
        houduan: 0,
		qianduan: 0,
      },
	  xinban_data:{},
	  list_tui_data:[],
      countdownTime: 0
    }
  },
  mounted() {
      // 计算2025年1月1日到2065年1月1日的总时间差
      const startDate = new Date('2025-01-01T00:00:00');
      const endDate = new Date('2065-01-01T00:00:00');
      const totalTime = endDate.getTime() - startDate.getTime();
      
      // 获取当前时间
      const now = new Date();
      
      // 如果当前时间在起始时间之前，显示总时间差
      if (now < startDate) {
          this.countdownTime = totalTime;
      } else if (now < endDate) {
          // 如果当前时间在起始和结束时间之间，计算剩余时间
          const elapsedTime = now.getTime() - startDate.getTime();
          this.countdownTime = totalTime - elapsedTime;
      } else {
          // 如果当前时间已超过结束时间，显示0
          this.countdownTime = 0;
      }
      
      // 页面加载时自动调用统计接口
      this.get_click();
	// 调用新版展示接口
	this.get_xinban();
	// 获取推荐圈子数据
	this.get_tui_api();
  },
  methods: {
	  goEvaluation(type) {
		  // 根据不同类型跳转到对应的页面
		  switch(type) {
			  case 2:
				  uni.navigateTo({ url: '/pages/gongneng/gongneng?id=2' }); // 盈利模式页面
				  break;
			  case 1:
				  uni.navigateTo({ url: '/pages/gongneng/gongneng?id=1' }); // 功能页面
				  break;
			  case 3:
				  uni.navigateTo({ url: '/pages/gongneng/gongneng?id=3' }); // 市场需求页面
				  break;
		  }
	  },
	  duibi(){
		  uni.navigateTo({
		    url: '/pages/gongneng/duibi?id=1'
		  });
	  },
	  go_quan(id){
		  uni.navigateTo({
		    url: `/pages/quanzi/index?id=${id}`
		  });
	  },
	  tiezi(quan_id,tie_id){
		  uni.navigateTo({
		    url: `/pages/tiezi/index?id=${tie_id}&cid=${quan_id}`
		  });
	  },
    xiangqing() {
      // 跳转到指定页面，带参数id=86和cid=1
      uni.navigateTo({
        url: '/pages/tiezi/index?id=86&cid=1'
      });
    },
    xuqiu() {
      // 跳转到圈子页面，带参数id=16
      uni.navigateTo({
        url: '/pages/quanzi/index?id=16'
      });
    },
    xiazai(id) {
      // 跳转到手册页面，带参数id=1&ce=2&yijiid=1
	    this.add_click(id);
	    if(id == 1){
		   uni.navigateTo({
	      	  url: '/pages/shouce/shouce?id=1&ce=2&yijiid=1'
	      	});
		
	    } else {
			uni.navigateTo({
			    url: '/pages/shouce/shouce?id=1&ce=2&yijiid=1'
			});
	    }
    },
    // 前端安装教程跳转
    jiaoceng2() {
		this.get_click();
      uni.navigateTo({
        url: '/pages/shouce/shouce?id=1&ce=8&yijiid=1'
      });
	  
    },
    // 后端安装教程跳转
    jiaoceng1() {
		this.get_click();
		  uni.navigateTo({
			url: '/pages/shouce/shouce?id=1&ce=3&yijiid=1'
		  });

    },
    // 赞助页面跳转
    zanzhu() {
      uni.navigateTo({
        url: '/pages/tiezi/index?id=52&cid=1'
      });
    },
	//添加统计
	add_click(id) {
		
		// 调用添加统计接口
		var datas;
		/*if(id==1){
			datas = "is_ajax=1&data[data]="+id;
		} else {
			datas = "is_ajax=1&data[qianduan]="+id;
		}*/
		datas = "is_ajax=1&data[data]="+id;
		var post_data = postRequest(QuanApi.get_xiazai(),datas);
		post_data.then(duixin_data => {
			if (duixin_data.data && duixin_data.data.code) {
				// 统计成功
			}
		}).catch(err => {
			console.error('添加统计失败:', err);
		});
		
	},
	// GET 统计
	get_click() {
		
		// 调用统计接口
		var get_data = getRequest(QuanApi.get_xiazai());
		get_data.then(duixin_data => {
			if (duixin_data.data.code) {
				// 统计成功
				this.tongji = duixin_data.data.data;
			}
		}).catch(err => {
			console.error('添加统计失败:', err);
		});
		
	},
	// 新版展示接口
	get_xinban() {
		
		// 调用统计接口
		var get_data = getRequest(QuanApi.get_xinban());
		get_data.then(duixin_data => {
			if (duixin_data.data.code) {
				// 统计成功
				this.xinban_data = duixin_data.data.data[0] || {};
				
			}
		}).catch(err => {
			console.error('添加统计失败:', err);
		});
		
	},
	// 跳转到帖子页面
	go_quantie(id, cid) {
		uni.navigateTo({
			url: `/pages/tiezi/index?id=${id}&cid=${cid}`
		});
	},
	// 学习运营页面跳转
	xuexi() {
		uni.navigateTo({
			url: '/pages/quanzi/index?id=18'
		});
	},
	// 交流运营页面跳转
	jiaoliu() {
		uni.navigateTo({
			url: '/pages/quanzi/index?id=7'
		});
	},
	// 如何写内容页面跳转
	xie() {
		uni.navigateTo({
			url: '/pages/u/vip'
		});
	},
	zanzhu(){
		uni.navigateTo({
			url: '/pages/tiezi/index?id=86&cid=1'
		});
		
	},
	 // 获取推荐圈子数据
    get_tui_api() {
        getRequest(QuanApi.get_tuijian_quan()).then(duixin_data => {
            if (duixin_data.data && duixin_data.data.code) {
                this.list_tui_data = duixin_data.data.data && duixin_data.data.data.list_tui || [];
            }
        }).catch(err => {
            //console.error('获取推荐圈子数据失败:', err);
        });
    },
  }
}
</script>

<style scoped>
.vip-float-tag {
	display: inline-block;
	margin-left: 5px;
	padding: 2px 6px;
	background: linear-gradient(135deg, #ffd700, #ff9800);
	color: white;
	font-size: 10px;
	border-radius: 10px;
	animation: float 2s ease-in-out infinite;
	transform-origin: center;
	font-weight: bold;
}
@keyframes float {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0px);
	}
}
/* 评价按钮容器样式 */
.evaluation-buttons {
	/*padding: 20rpx;*/
	display: flex;
	justify-content: space-between;
	gap: 30rpx;
}
.d-goumai {
	flex: 1;
	padding: 20rpx;
	border-radius: 20rpx;
	border: 1px solid #ffffff; /* 灰色边框 */
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* 渐变背景 */
	text-align: center;
	transition: all 0.3s ease;
	min-height: 810rpx;
	display: flex;
	flex-direction: column;
	
}
.d-goumai-vip {
	flex: 1;
	padding: 20rpx;
	border-radius: 20rpx;
	border: 1px solid #ffffff; /* 灰色边框 */
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* 渐变背景 */
	text-align: center;
	transition: all 0.3s ease;
	min-height: 450rpx;
	display: flex;
	flex-direction: column;
	
}
/* 单个评价按钮样式 */
.evaluation-button {
	flex: 1;
	padding: 20rpx;
	border-radius: 20rpx;
	border: 1px solid #ffffff; /* 灰色边框 */
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* 渐变背景 */
	text-align: center;
	transition: all 0.3s ease;
	min-height: 140rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 按钮点击效果 */
.evaluation-button:active {
	background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
	transform: scale(0.98);
}

/* 按钮标题样式 */
.button-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

/* 按钮副标题样式 */
.button-subtitle {
	font-size: 28rpx;
	color: #666;
	display: block;
}
</style>